<!--基本信息-->
<template>
    <div class="user-info">
        <!-- <user-avatar ref="avatar" :cUserAvatar="userInfo.avatar"></user-avatar> -->
        <el-form :model="userInfo" ref="ruleForm" label-width="80px" style="margin-top:40px">

            <!-- 头像 -->
            <el-form-item label="头像：" prop="avatar">
                <el-upload 
                    class="avatar-uploader" 
                    action="http://localhost:8090/file/upload"
                    :headers=head
                    :show-file-list="false" 
                    :on-remove="handleRemove"
                    :on-success="handleAvatarSuccess" 
                    :before-upload="beforeAvatarUpload"
                    >
                    <img v-if="userInfo.avatar" :src="userInfo.avatar" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>


            <el-form-item label="昵称：" prop="nickName">
                <el-input v-model="userInfo.nickName" style="width:300px"></el-input>
            </el-form-item>
            <el-form-item label="姓名：" prop="realName">
                <el-input v-model="userInfo.realName" style="width:300px"></el-input>
            </el-form-item>
            <el-form-item label="手机号：" prop="phone">
                <el-input v-model="userInfo.phone" style="width:300px"></el-input>
            </el-form-item>
            <el-form-item label="身份证：" prop="identityNum">
                <el-input v-model="userInfo.identityNum" style="width:300px"></el-input>
            </el-form-item>
            <el-form-item label="地址：" prop="address">
                <el-input v-model="userInfo.address" style="width:300px"></el-input>
            </el-form-item>
        </el-form>
        <el-button style="margin-left: 310px;" type="success" @click="updateInfo">修改</el-button>
    </div>
</template>

<script setup lang="ts">
import { loginUpdateByUsername, loginSelectByUsername } from "@/api/user";
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { Plus } from '@element-plus/icons-vue'
import store from "@/store";

import type { UploadProps } from 'element-plus'

const head = ref(
    {"Authorization":store.state.token
})

const userInfo = ref({
    avatar: "",
    nickName: "",
    realName: "",
    phone: "",
    identityNum: "",
    address: "",
});


const load = async () => {
    await loginSelectByUsername().then((res) => {
        if (res.flag == true) {
            userInfo.value = res.data;
            console.log(res.data);
            console.log(userInfo.value);
        } else {
            alert(res.data);
        }
    });
}
load()

//修改信息
const updateInfo = () => {
    loginUpdateByUsername({
        realName: userInfo.value.realName,
        nickName: userInfo.value.nickName,
        phone: userInfo.value.phone,
        identityNum: userInfo.value.identityNum,
        address: userInfo.value.address,
        avatar: userInfo.value.avatar,
    }).then((res) => {
        if (res.flag == true) {
            ElMessage.success("修改成功！");
        } else {
            ElMessage.error("修改失败！");
        }
    })
}


//文件上传
const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
    console.log(response);
    userInfo.value.avatar = response.data;
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('Avatar picture must be JPG format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}

//删除文件
const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
  console.log(file, uploadFiles)
}

</script>

<style lang="scss" scoped>
.user-info {
    margin: 0px auto;
    width: 900px;
    float: left;
    padding-left: 20px;
    background: #fff;
    height: 100%;
    min-height: 600px;
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}


.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>